<template>
  <v-container>
    <div class="d-flex justify-center align-center">
      <h1>{{countryName}}</h1>
    </div>
    <div class="d-flex justify-space-around align-center ma-6">
      <div class="overlay-chart-wrapper left">
        <span>实时统计数据</span>
        <div id="bar-chart"></div>
      </div>
      <div class="overlay-chart-wrapper right">
        <span>历史变化曲线</span>
        <div id="curve-chart"></div>
      </div>
    </div>
  </v-container>
</template>

<script>
import options from "./DrawerOptions";

export default {
  name: 'Overlay',
  props: {
    countryCode: {default: '', type: String},
  },
  data() {
    return{
      countryName: '',
      curveDom: {},
      barDom: {},
      curveObj: {},
      barObj: {},
      dataExists: true,
    }
  },
  mounted() {
    this.countryName = this.$NameToIso3Mapper.get(this.countryCode);
    this.curveDom = document.getElementById('curve-chart');
    this.barDom = document.getElementById('bar-chart');
    this.curveObj = this.$echarts.init(this.curveDom);
    this.barObj = this.$echarts.init(this.barDom);

    let that = this;
    this.barObj.showLoading(options.DrawerLoading);
    this.curveObj.showLoading(options.DrawerLoading);
    this.$api.overview.countryInfo(this.countryCode).then((res) => {
      let dataMatrix = [[],[],[],[]];
      let o = '';
      for(o in res.data.timeline.cases) {
        dataMatrix[0].push(o);
        dataMatrix[1].push(res.data.timeline.cases[o]);
        dataMatrix[2].push(res.data.timeline.recovered[o]);
        dataMatrix[3].push(res.data.timeline.deaths[o]);
      }
      that.drawHistoryCurve(dataMatrix);
      let l = dataMatrix[0].length;
      that.drawPresentBar(dataMatrix[0][l - 1],dataMatrix[1][l - 1],dataMatrix[2][l - 1],dataMatrix[3][l - 1]);
    }).catch(() => {
      that.drawBlank();
    });
  },
  methods: {
    drawHistoryCurve(dataMatrix) {
      options.DrawerLineChartOption.xAxis.data = dataMatrix[0];
      options.DrawerLineChartOption.series[0].data = dataMatrix[1];
      options.DrawerLineChartOption.series[1].data = dataMatrix[2];
      options.DrawerLineChartOption.series[2].data = dataMatrix[3];
      this.curveObj.setOption(options.DrawerLineChartOption);
      this.curveObj.on('click', (params) => {
        this.$emit('clickCountry',params.name);
      });
      window.addEventListener("resize", () => {
        this.curveObj.resize();
      });
      this.curveObj.hideLoading();
    },
    drawPresentBar(date,cases,recovered,deaths) {
      options.DrawerBarChartOption.series[0].data[0] = deaths;
      options.DrawerBarChartOption.series[1].data[0] = recovered;
      options.DrawerBarChartOption.series[2].data[0] = cases - deaths - recovered;
      this.barObj.setOption(options.DrawerBarChartOption);
      this.barObj.on('click', (params) => {
        this.$emit('clickCountry',params.name);
      });
      window.addEventListener("resize", () => {
        this.barObj.resize();
      });
      this.barObj.hideLoading();
    },
    drawBlank() {
      this.dataExists = false;
      this.curveObj.dispose();
      this.barObj.dispose();
      this.curveDom.innerHTML = `
            <div class="d-flex justify-center align-center" style="width: 100%;height: 400px">
                <h1 class="tips" style="font-size: 30px;color: white;">暂无数据</h1>
            </div>
        `;
      this.barDom.innerHTML = `
            <div class="d-flex justify-center align-center" style="width: 100%;height: 400px">
                <h1 class="tips" style="font-size: 30px;color: white;">暂无数据</h1>
            </div>
        `;
    },
  }
}
</script>
<style scoped>
.overlay-chart-wrapper {
  width: 420px;
}
.overlay-chart-wrapper.right{
  text-align: end;
}
#bar-chart{
  width: 100%;
  height: 400px;
}
#curve-chart{
  width: 100%;
  height: 400px;
}
</style>